        
        <style>
            
            .sidebar {
                /*display: block;*/
                /*float: left;*/
                /*width: 250px;*/
                /*background: #333;*/
            }

            .sidebar-nav {
                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
                /*background-image: -webkit-linear-gradient(left, color-stop(#333333 10px), color-stop(#222222 10px));*/
                /*background-image: linear-gradient(to right, #333333 10px, #222222 10px);*/
                /*background-repeat: repeat-x;*/
                /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=1);*/
            }
/*            .sidebar-nav ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }*/
            .sidebar-nav a,
            .sidebar-nav a:hover,
            .sidebar-nav a:focus,
            .sidebar-nav a:active {
                outline: none;
            }
            .sidebar-nav ul li,
            .sidebar-nav ul a {
                display: block;
            }
            .sidebar-nav ul a {
                padding: 10px 20px;
                color: #aaa;
                border-top: 1px solid rgba(0, 0, 0, 0.3);
                box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset;
                text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
            }
            .sidebar-nav ul a:hover,
            .sidebar-nav ul a:focus,
            .sidebar-nav ul a:active {
                color: #fff;
                text-decoration: none;
            }
            .sidebar-nav ul ul a {
                padding: 10px 30px;
                background-color: rgba(255, 255, 255, 0.1);
            }
            .sidebar-nav ul ul a:hover,
            .sidebar-nav ul ul a:focus,
            .sidebar-nav ul ul a:active {
                background-color: rgba(255, 255, 255, 0.2);
            }
            .sidebar-nav-item {
                padding-left: 5px;
            }
            .sidebar-nav-item-icon {
                padding-right: 5px;
            }
            
/*        @media (min-width:768px) {
            #menu li {
              position: relative;
            }
            #menu > li ul {
              position: absolute;
              left: 100%;
              top: 0;
              min-width: 200px;
              display: none;
            }
            #menu li:hover > ul,
            #menu li:hover > ul.collapse{
              display: block !important;
              height: auto !important;
              z-index: 1000;
              background: #444;
            visibility: visible;
            }
        }*/
        </style>
        <style>
/*          @media (max-width:767px) {
            section.content {
              float: left;
              width: 100%;
            }
          }*/
        </style>
        
        <div class="row">
            
            <div class="col-3">
                <!-- Sidebar -->
                <aside class="sidebar">
                    <nav class="sidebar-nav">
                        <ul id="menu">
                            <li class="active">
                                <a href="#">
                                    <span class="sidebar-nav-item-icon fa fa-list fa-lg"></span>
                                    <span class="sidebar-nav-item">Menu</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="#">
                                    <span class="sidebar-nav-item-icon fa fa-dashboard fa-lg"></span>
                                    <span class="sidebar-nav-item">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="sidebar-nav-item-icon fa fa-money fa-lg"></span>
                                    <span class="sidebar-nav-item">Modules</span>
                                    <span class="glyphicon arrow"></span>
                                </a>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <span class="sidebar-nav-item-icon fa fa-building-o"></span>
                                            Companies
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="sidebar-nav-item-icon fa fa-users"></span>
                                            Teams
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="sidebar-nav-item-icon fa fa-money"></span>
                                            Subscriptions
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="sidebar-nav-item-icon fa fa-users fa-lg"></span>
                                    <span class="sidebar-nav-item">Users</span>
                                    <span class="glyphicon arrow"></span>
                                </a>
                                <ul>
                                    <li><a href="#">All</a></li>
                                    <li><a href="#">Coaches</a></li>
                                    <li><a href="#">Parents</a></li>
                                    <li><a href="#">Athletes</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="sidebar-nav-item-icon fa fa-user fa-lg"></span>
                                    <span class="sidebar-nav-item">Admin</span>
                                    <span class="glyphicon arrow"></span>
                                </a>
                                <ul>
                                    <li><a href="#">CRUD</a></li>
                                    <li><a href="#">Roles</a></li>
                                    <li><a href="#">Permissions</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="sidebar-nav-item-icon fa fa-gears fa-lg"></span>
                                    <span class="sidebar-nav-item">Settings</span>
                                    <span class="glyphicon arrow"></span>
                                </a>
                                <ul>
                                    <li><a href="#">Account Settings</a></li>
                                    <li><a href="#">CMS Settings</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </aside>
            </div>
            
            <div class="col-9">
                    <div id="main-container" class="ajax-container">
                        <section class="row">
                            <div class="col-12">
                                <div>
                                    <h1><i class="fa fa-dashboard"></i> Dashboard</h1>
                                </div>
                                <div>
                                    <?= $this->breadcrumb->output(); ?>
                                </div>
                            </div>
                        </section>

                        <section class="row">
                            <div class="col-12">
                                <div id="panel" class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="pull-right">
                                            <span class="minimax"></span>
                                            <button type="button" class="close" aria-hidden="true">&times;</button>
                                        </div>
                                        <h2 class="panel-title bold"><i class="fa fa-list-alt"></i> Preview Panel</h2>
                                    </div>
                                    <div class="panel-body">
                                        <div class="guideline guideline-sticky bg-info">
                                            <i class="fa fa-info-circle fa-lg"></i> Panel Guideline Goes Here.
                                        </div>
                                        Content Goes Here ...
                                    </div>
                                    <div class="panel-footer">
                                        <div class="align-center">
                                            Footer
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                
                <!-- page-script -->
                <script src="<?= base_url() ?>js/scripts/dashboard.js"></script>
                
            </div>
        </div>
        
        <script>
    $(function () {

        $('#menu').metisMenu();
    });
        </script>

        <script>
//        (function($) {
//          $(document).ready(function() {
//
//            var $this = $('#menu'), resizeTimer, self = this;
//
//            var initCollapse = function(el) {
//              if ($(window).width() >= 768) {
//                this.find('li').has('ul').children('a').off('click');
//              }
//            };
//
//            $(window).resize(function() {
//                clearTimeout(resizeTimer);
//                resizeTimer = setTimeout(self.initCollapse($this), 250);
//            });
//
//          });
//        })(jQuery);
        </script>